<template>
    <div class="jx-login-wrap" @keypress.enter="Login">
        <div class="jx-login-window">
            <div class="jx-login-logo">
                <img :src="infoData.unauthorizedLogoImage[0].keyValuePath" />
                <span>{{ infoData.projectName[0].keyValue }}</span>
            </div>
            <div class="jx-login-main">
                <div class="jx-login-title">登 录</div>
                <form class="jx-login-form">
                    <!-- <div class="jx-login-form-item" :class="{'is-error' : accountActive}">
                        <input type="text" v-model="account" :placeholder="accountValue" @focus="accountDown">
                    </div>
                    <div class="jx-login-form-item" :class="{'is-error' : pwdActive}">
                        <input type="password" v-model="password" autocomplete="off" :placeholder="passwordValue" @focus="pwdDown" />
                    </div>
                    <div class="jx-login-form-item captcha" v-if="codeStatus != 200">
                        <input type="text" placeholder="请输入验证码" />
                        <img :src="captcha" @click="verCodeFn" />
                    </div> -->
                    <div class="jx-login-form-item">
                        <input type="text" v-model="account" placeholder="请输入账号" @focus="accountDown">
                    </div>
                    <div class="jx-login-form-item">
                        <input type="password" v-model="password" autocomplete="off" placeholder="请输入密码" @focus="pwdDown" />
                    </div>
                    <div class="jx-login-form-item captcha" v-if="codeStatus != 200">
                        <input type="text" v-model="verCode" placeholder="请输入验证码" />
                        <img :src="captcha" @click="verCodeFn" />
                    </div>
                    <p v-html="errorValue"></p>
                    <div class="jx-login-form-item">
                        <div class="jx-login-form-submit" @click="Login">登录</div>
                    </div>
                </form>
            </div>
        </div>
        <div class="jx-login-footer" v-show="isShowFooter">
            <p>{{ infoData.copyrightAttribution[0].keyValue }}   {{ infoData.phoneNumber[0].keyValue }} </p>
            <p>{{ infoData.address[0].keyValue }} </p>
        </div>
    </div>
</template>

<script>
    import { getToken, setToken, getName, setName} from '@/utils/auth'
    export default {
        data() {
            return {
                account: '',    //用户名
                password: '',   //密码
                verCode: '',    //验证码
                //错误提示
                errorValue: '',
                //判断是否显示验证码
                codeStatus: 200,
                //验证码
                captcha: '',
                // 是否显示版权所有
                isShowFooter: false,
                infoData: ''
            }
        },
        created () {
            let self = this
            this.captcha = '/tes/unauthorized/image-code?width=75&height=35&time=' + (new Date()).valueOf()
            //yx修改
            this.isShow()

            // 拉取信息
            this.loginInfo()
            self.$nextTick(() => {
                let screenHeight = window.screen.height

                if(screenHeight >= 900){
                    self.isShowFooter = true
                }else{
                    self.isShowFooter = false
                }
                window.onresize = function () {
                    if(screenHeight >= 900){
                        self.isShowFooter = true
                    }else{
                        self.isShowFooter = false
                    }
                }
            })
        },
        methods: {
            // 拉取信息
            loginInfo() {
                let self = this
                self.$http.get('/tes/unauthorized/config?keys=projectName,unauthorizedLogoImage,copyrightAttribution,phoneNumber,address').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.infoData = res.data
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                     reject(err)
                })
            },
            //yx修改 获取验证码是否显示
            isShow(){
                let self = this
                self.$http.get("/tes/unauthorized/image-code/show").then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        if(res.data){
                            self.codeStatus=''
                        }
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                     reject(err)
                })
            },
            //登录
            Login() {
                let self = this,
                    userName = self.account,
                    userPwd = self.password
                    userName = userName.replace(/(^\s*)|(\s*$)/g,"")
                    userPwd = userPwd.replace(/(^\s*)|(\s*$)/g,"")
                if(userName == ''){
                    self.errorValue = '请输入账号'
                }else if (userName.length > 20) {
                    self.errorValue = '请输入正确账号'
                }else if(userPwd == ''){
                    self.errorValue = '请输入密码'
                }else if (userPwd.length > 14) {
                    self.errorValue = '请输入正确密码'
                }else if (self.codeStatus != 200 && self.verCode == '') {
                     self.errorValue = '请输入验证码'
                }else {
                    let formData = new FormData()
                    if (this.codeStatus == 200) {
                        formData.append('username', userName)
                        formData.append('password', userPwd)
                    }else{
                        formData.append('username', userName)
                        formData.append('password', userPwd)
                        formData.append('code', self.verCode)
                    }
                    return new Promise((resolve, reject) => {
                        self.$http.post('/tes/unauthorized/form', formData, {
                            headers: {
                                'Content-Type': 'multipart/form-data'
                            }
                        }).then((response) => {
                            let res = response.data
                            if (res.code == 200) {
                                //错误提示
                                self.errorValue = ''
                                let roleCode = res.data.roleCode
                                let roles = []
                                roles.push(roleCode)
                                //设置token
                                setToken(roleCode)
                                //vuex提交SET_ROLES角色
                                self.$store.commit('SET_ROLES', roles)
                                // self.$store.commit('SET_ROLES', roles)
                                if (roleCode == 'TEACHER' || roleCode == 'STUDENT' || roleCode == 'UNIVERSITY_TEACHER' || roleCode == 'MARKET_TEACHER'){
                                    self.$router.push({ path: '/Teaching/index' })
                                    window.location.reload()
                                }else if(roleCode == 'ADMIN' || roleCode == 'SUPER_ADMIN') {
                                    self.$router.push({ path: '/Admin/TeachingMange' })
                                    window.location.reload()
                                }else if(roleCode == 'INTERNET_ADMIN') {
                                    self.$router.push({ path: '/Admin/Internet/TeachMange' })
                                    window.location.reload()
                                }
                                resolve()
                            }else{
                                //错误提示
                                self.errorValue = res.message
                                self.codeStatus = res.code
                                self.captcha = '/tes/unauthorized/image-code?width=75&height=35&time=' + (new Date()).valueOf()
                            }
                        }).catch(err => {
                            reject(err)
                        })
                    })
                }
            },
            //账号鼠标按下
            accountDown(){
                this.accountActive = false
                this.accountValue = '请输入帐号'
            },
            //密码鼠标按下
            pwdDown(){
                this.pwdActive = false
                this.passwordValue = '请输入密码'
            },
            //切换验证码
            verCodeFn(){
                this.captcha = '/tes/unauthorized/image-code?width=75&height=35&time=' + (new Date()).valueOf()
            }
        }
    }
</script>

<style scoped lang="scss">
    @import '@/styles/login.scss';
</style>
